let size = 56
// column转化为数组
let columns = Array.from(document.getElementsByClassName('column'))
// 样式数组  对称
let class_list = ['visible', 'near', 'far', 'far', 'distant', 'distant']
// 24小时制
let is_24_hour_clock = true

function getclock() {
    let d = new Date()
    let hour = is_24_hour_clock ? d.getHours() : d.getHours() % 12 || 12
    hour = hour < 10 ? '0' + hour : hour
    let minute = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
    let second = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()

    return hour + "" + minute + "" + second
}
console.log(getclock())

function getClass(n, i) {
    // find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
    return class_list.find(function (_class, _class_index) {
        return i - class_list === n || i + _class_index === n
    }) || ''
}

console.log(getClass(5, 2));

setInterval(() => {
    let c = getclock()
    columns.forEach(function (ele, i) {
        let n = parseInt(c[i])
        let offset = -n * size
        // 设置位置
        ele.style.transform = 'translateY(calc(50vh + ' + offset + 'px - ' + (size / 2) + 'px))'

        // 设置num的透明度
        Array.from(ele.children).forEach(function (ele2, i2) {
            ele2.className = 'num ' + getClass(n, i2)
        })
    }, 1000);
})
